<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="自营商品" fixed :border="false" height="88rpx" background-color="#f7f7f7" left-icon="left"
      @clickLeft="onClickLeft"></uni-nav-bar>
    <view class="topTag">
      <view class="tag" :class="{ activeTag: active == '0' }" @click="changeTab('0')">自营标品({{ count }})</view>
      <view class="tag" :class="{ activeTag: active == '1' }" @click="changeTab('1')">自营非标</view>
    </view>
    <scroll-view v-if="active == '0'" class="scroll-view_H" scroll-y @refresherrefresh="refresherrefreshFn"
      refresher-enabled="true" :show-scrollbar="false" @scrolltolower="lower" :refresher-triggered="triggered" enhanced
      style="height: calc(100% - var(--window-top) - 168rpx);">

      <!-- 自营标品 -->
      <view class="infoCard" v-for="item in hasGoodsList" :key="item.id" v-if="active == '0'">
        <view class="tokenNum">
          <view class="count u-ellipsis goodsname" style="width: 100% !important;">{{ item.commodityName }}（{{
            item.barCode
          }}）</view>
        </view>
        <view class="tokenNum">
          <view class="count" style="width: 33% !important;">进货价：{{ item.buyingPrice }}元</view>
          <view class="count" style="width: 33% !important;">售价：{{ item.storePrice }}元</view>
          <view class="count" style="width: 33% !important;">毛利：{{ item.gross }}元</view>
        </view>
        <view class="tokenNum" style="margin-bottom: 20rpx;">
          <view class="count" style="width: 33% !important;">销售额：{{ item.salesVolume }}元</view>
          <view class="count" style="width: 33% !important;">库存：{{ item.inventoryNum }}</view>
        </view>
        <view class="tokenNum1">
          <view class="btnBox btn"
            @click="$navTo('./hasAutotrophyGoodsDetail', { id: item.id, type: '0', obj: JSON.stringify(item) })">编 辑
          </view>
          <view class="btnBox1" @click="delhasGoodFn(item.id)">删 除</view>
        </view>
      </view>
      <uni-load-more :status="loading" v-if="hasGoodsList.length > 0"></uni-load-more>
      <view
        style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
        v-if="active == '0' && hasGoodsList.length == 0">
        <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
      </view>
      <view
        style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
        v-if="active == '1' && noGoodsList.length == 0 && categoryList == {}">
        <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
      </view>
    </scroll-view>
    <!-- 自营非标 -->
    <scroll-view class="scroll-view_H" v-if="active == '1'" scroll-y
      style="height: calc(100% - var(--window-top) - 168rpx);" enhanced show-scrollbar="false"
      @refresherrefresh="refresherrefreshFn" :refresher-triggered="triggered" refresher-enabled="true">
      <view class="main">
        <view class="categorybox">
          <scroll-view scroll-y style="height: calc(100%);width: 100%;" enhanced show-scrollbar="false">
            <!-- <view class="itemclas u-ellipsis" @click="changCategory('')" :class="{ active: !activeId }">全部
            </view> -->
            <view :id="key" v-for="(val, key) in categoryList" :key="key" class="itemclas u-ellipsis"
              @click="changCategory(key)" :class="{ active: key == activeId }">{{ val }}</view>
          </scroll-view>
        </view>
        <view class="goodsbox">
          <scroll-view style="height: calc(100%);width: 100%;" scroll-y show-scrollbar="false" @scrolltolower="lower">
            <view class="goodCard" v-for="item in noGoodsList" :key="item.id">
              <view class="goodInfo">
                <view class="goodsname u-ellipsis">{{ item.name }}</view>
                <view class="flexBox">
                  <view class="sub_title">进货价：{{ item.purchasePrice }}元/KG</view>
                  <view class="sub_title">售价：{{ item.storePrice }}元/KG</view>
                </view>
                <view class="flexBox">
                  <view class="sub_title">毛利率：{{ item.storeRate }}%</view>
                  <view class="sub_title">销售额：{{ item.salesVolume }}元</view>
                </view>
                <view class="flexBox">
                  <view class="sub_title"></view>
                  <view class="sub_title">
                    <uni-icons type="compose" size="25" style="margin-right: 20rpx;"
                      @click="$navTo('./noAutotrophyGoodsDetail', { id: item.id, type: '0', obj: JSON.stringify(item) })"></uni-icons>
                    <uni-icons type="trash" size="25" style="margin-right: 20rpx;"
                      @click="delnoGoodFn(item.id)"></uni-icons>
                  </view>
                </view>
              </view>
            </view>
            <uni-load-more :status="loading"></uni-load-more>
          </scroll-view>
        </view>
      </view>
    </scroll-view>
    <cls-DragBtn is-dock :bottom-px="250" v-if="active == '0'">
      <view class="floatBox btn type-1" @click="$navTo('./hasAutotrophyGoodsDetail', { type: '1' })">新增</view>
    </cls-DragBtn>
    <cls-DragBtn is-dock :bottom-px="250" v-if="active == '1'">
      <view class="floatBox btn type-1"
        @click="$navTo('./noAutotrophyGoodsDetail', { type: '1', categoryId: activeId, categoryName: activeName })">
        新增</view>
    </cls-DragBtn>
  </view>
</template>

<script>
import { DecimalUtils } from "@/utils/math.js";
import { reqSelfCommodityList, getDictValueAndNameSource, reqNonstandardCommodityList, reqDeleteStoreCommodity, reqDeleteNonstandardCommodity } from '@/apis/member'
export default {
  name: "AutotrophyGoods",
  data() {
    return {
      active: '0',
      hasGoodsList: [],
      noGoodsList: [],
      count: 0,
      page: {
        pageNum: 1,
        pageSize: 15
      },
      nextPage: '',
      triggered: false, // 是否触发下拉刷新
      loading: 'loading', // 是否触发上拉加载

      activeId: '',
      activeName: '',
      categoryList: {},
    }
  },
  onLoad() {
    // this.reqSelfCommodityList()
  },
  onShow() {
    this.hasGoodsList = []
    this.noGoodsList = []
    this.page = {
      pageNum: 1,
      pageSize: 15
    }
    this.loading = 'loading'
    if (this.active == '0') {
      this.reqSelfCommodityList()
    } else if (this.active == '1') {
      this.reqGoodsList()
    }
  },
  methods: {
    // 自营标品 
    async reqSelfCommodityList() {
      const res = await reqSelfCommodityList({ ...this.page })
      if (res.code === 200) {
        this.hasGoodsList = [...this.hasGoodsList, ...res.data.list]
        this.hasGoodsList = this.hasGoodsList.map(item => {
          let gross = DecimalUtils.subtract(item.storePrice, item.buyingPrice)
          return {
            ...item,
            gross
          }

        })
        this.nextPage = res.data.nextPage
        this.count = res.data.total
        console.log('res.data:', res.data);
        this.triggered = false
        if (res.data.isLastPage) {
          this.loading = "noMore"
        }
      }
    },
    changeTab(val) {
      this.page = {
        pageNum: 1,
        pageSize: 15
      }
      this.loading = 'loading'
      this.hasGoodsList = []
      this.noGoodsList = []
      this.active = val
      if (val == '0') {
        this.reqSelfCommodityList()
      } else if (val == '1') {
        this.getCategoryList()
      }
    },

    lower() {
      if (this.loading == "noMore") {
        return;
      }
      this.page.pageNum++;
      this.loading = "loading";
      if (this.active == '0') {
        this.reqSelfCommodityList()
      } else if (this.active == '1') {
        this.reqGoodsList()
      }
    },
    refresherrefreshFn() {
      this.page.pageNum = 1
      this.triggered = true
      this.hasGoodsList = []
      this.noGoodsList = []
      this.loading = "loading";
      if (this.active == '0') {
        this.reqSelfCommodityList()
      } else if (this.active == '1') {
        this.reqGoodsList()
      }
    },

    async getCategoryList() {
      const res = await getDictValueAndNameSource('NONSTANDARD_CATEGORY');
      this.categoryList = res.data;
      console.log(this.categoryList, 'this.categoryList');
      this.activeId = Object.keys(this.categoryList)[0]
      this.activeName = this.categoryList[this.activeId]
      this.page.pageNum = 1
      this.reqGoodsList()
    },
    changCategory(id) {
      this.activeId = id
      this.activeName = this.categoryList[this.activeId]
      this.noGoodsList = []
      this.page.pageNum = 1
      this.loading = "loading";

      this.reqGoodsList()
    },
    async reqGoodsList() {
      const res = await reqNonstandardCommodityList({ ...this.page, categoryId: this.activeId })
      if (res.code == 200) {
        this.noGoodsList = [...this.noGoodsList, ...res.data.list]
        console.log('商品列表', res.data);
        this.triggered = false
        if (res.data.isLastPage) {
          this.loading = "noMore"
        }
      }
    },
    delhasGoodFn(id) {
      uni.showModal({
        content: '是否删除该商品?',
        success: async (res) => {
          if (res.confirm) {
            let res = await reqDeleteStoreCommodity({ id });
            if (res.code === 200) {
              this.hasGoodsList = []
              this.page.pageNum = 1
              this.loading = 'loading'
              this.reqSelfCommodityList();
              uni.utils.toast('删除成功', 'success');
            }
          } else if (res.cancel) {
            console.log('取消');
            //TODO
          }
        }
      })
    },
    delnoGoodFn(id) {
      uni.showModal({
        content: '是否删除该商品?',
        success: async (res) => {
          if (res.confirm) {
            let res = await reqDeleteNonstandardCommodity({ id });
            if (res.code === 200) {
              this.noGoodsList = []
              this.page.pageNum = 1
              this.loading = 'loading'
              this.reqGoodsList();
              uni.utils.toast('删除成功', 'success');
            }
          } else if (res.cancel) {
            console.log('取消');
            //TODO
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.content {
  height: 100vh;
  background-color: #f7f7f7;
}

.topTag {
  height: 80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #eee;

  .tag {
    width: 30%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 28rpx;
    color: #999;

    &.activeTag {
      color: $uni-main-bgColor;
      font-weight: bold;
      border-bottom: 4rpx solid $uni-main-bgColor;
    }
  }
}

.infoCard {
  // width: 100%;
  background-color: #edf2fa;

  border-radius: 20rpx;
  margin: 20rpx;
  font-size: 26rpx;
  // margin-bottom: 10rpx;
  padding: 20rpx 10rpx;
  align-items: center;
  height: 290rpx;
  line-height: 60rpx;
  border: 1px solid #d3e3fd;

  .tokenNum {

    display: flex;
    width: 100%;
    justify-content: space-between;

    .count {
      width: 48%;
      padding-left: 20rpx;
    }

    .count1 {
      width: 33%;
      padding-left: 20rpx;
    }
  }

  .tokenNum1 {
    display: flex;
    width: 100%;
    justify-content: end;

    .btnBox {
      background: #2979ff;
      color: #fff;
      border-radius: 8rpx;
      width: 100rpx;
      text-align: center;
      height: 50rpx;
      line-height: 50rpx;
      margin-right: 30rpx;
    }

    .btnBox1 {
      margin-right: 10rpx;
      background: #f54343;
      // color: #fff;
      border-radius: 8rpx;
      width: 100rpx;
      text-align: center;
      height: 50rpx;
      line-height: 50rpx;

    }
  }
}

.main {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  // overflow: hidden;
}

.categorybox {
  height: 100%;
  width: 180rpx;
  // overflow: hidden;
  color: #444;
  background-color: #f6f6f6;
  font-size: $uni-font-size-small;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100vw;
  height: 100%;

  .itemclas {
    padding: 10rpx 10rpx;
    height: 80rpx;
    text-align: center;
    line-height: 50rpx;
    border-left: 4px solid #f6f6f6;
  }

  .active {
    background-color: #fff;
    border-left: 4px solid $uni-main-bgColor;
    font-weight: 600;
    color: $uni-main-bgColor;
    font-size: $uni-font-size-base;
  }
}

.goodsbox {
  font-size: $uni-font-size-small;
  line-height: 36rpx;
  // flex: 1;
  width: calc(100% - 180rpx);

  .goodCard {
    // width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    padding-left: 20rpx;

    background-color: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;

    .goodInfo {
      height: 250rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: space-evenly;
      justify-content: space-between;
    }

    .goodsname {
      font-weight: 600;
      width: 100%;
      padding-right: 20rpx;
      font-size: $uni-font-size-upBase;
      margin-bottom: 10rpx;
    }

    .sub_title {
      font-size: $uni-font-size-mini;
    }

    .flexBox {
      display: flex;
      justify-content: space-between;
      font-size: $uni-font-size-mini;
      // flex: 1;
      line-height: 60rpx;
      width: 100%;
    }

    .btnBox {
      width: 100rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 10rpx;
      background-color: $uni-main-bgColor;
      text-align: center;
      color: #fff;
    }
  }
}

.floatBox {
  // position: fixed;
  // bottom: 150rpx;
  // right: 50rpx;
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx !important;
  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .3);
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  padding: 10rpx;
  box-sizing: border-box;
}
</style>
